import React, { Component } from "react";

/*
  解决this指向问题
    1. 内联地使用bind(this)， 不推荐
      bind方法会产生一个新函数，调用多次就会产生多个函数在内存中，占用内存
    2. 在constructor里面this.xxx = this.xxx.bind(this);
      推荐 如果组件出现多个事件处理函数，显得有些冗余了
    3. 使用箭头函数
      更加推荐 因为箭头函数的this指向是指向外层
*/

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };
    // this.handleClick = this.handleClick.bind(this);
  }

  handleClick = () => {
    this.setState((prevState) => {
      return {
        count: prevState.count + 1,
      };
    });
  };

  render() {
    return (
      <>
        <h2>事件处理</h2>
        <p>{this.state.count}</p>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;

/*
  const obj = {
    fn: function () {},
    fn2() {},
    fn3: () => {},
  };

  const fn = () => {
    const fn1 = function () {};
    const fn2 = () => {};
  };

  class Cls {
    state = 3;
    // fn() {};
    fn2 = () => {};
  }
*/
